<template>
    <div class="Table">
        <a-table
            :data="modelValue"
            :columns="columns"
            :pagination="pagination"
            
        >
        <template #columns>
          <a-table-column  :data-index="col.dataIndex" v-for="(col,index) in columns" :key="col.slotName" >
            <template #title>
              <div v-if="col.slotName!='optional'" >
                {{ col.title }}
              </div>
              <div v-else class="optional-title">
                {{ col.title }}
                <img :src="addPng" alt="" @click="addTableData(col)">
              </div>
            </template>
            <template #cell="{ record }" >
              <div v-if="col.slotName!='optional'" >
            <a-input :style="{width:'100%'}" placeholder="请输入点什么" allow-clear v-model="record[col.dataIndex as string]"/>
          </div>
          <div v-else>
            <a-button type="text" status="danger" @click="delData(record)">删除</a-button>
          </div>
        </template>
          </a-table-column> 
        </template>
      </a-table>
    </div>
</template>


<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, watchEffect, type PropType,computed } from 'vue'
import type { TableColumnData, TableData } from '@arco-design/web-vue/es/table/interface'
import addPng from '../../../../assets/imgs/add.png'
import { cloneDeep } from 'lodash'
let emits = defineEmits(['update:modelValue'])
let props = defineProps({
  //tableData
  modelValue: {
        
        type: Array as PropType<TableData[]>,
        default: ''
    },
   
    tableColumns:{
      type:Array as PropType<Array<{
        label:string,
        value:string
      }>>,
      default : () => []
    }
})



let columns=computed(()=>{
  let base=[{
      title: '操作',
      slotName: 'optional',
      dataIndex:"optional"
  }]
  return [...props.tableColumns.map(item=>{
    return {
      title: item.label,
      dataIndex: item.value,
      slotName: item.value
    }
  }),...base,]
})


//删除tableData数据
function delData(data:any){
  let curTableData=cloneDeep(props.modelValue)
  let index=curTableData.findIndex((item:any)=>item.id===data.id)
  curTableData.splice(index,1)
  emits('update:modelValue',curTableData)
}

//添加tableData数据
function addTableData(col:any){
  let tableData={}
  cloneDeep(columns.value).forEach(item=>{
    if(item.dataIndex!=='optional'){
      tableData[item.dataIndex as string]=''
    } 
  })
  let curTableData=cloneDeep(props.modelValue)
  curTableData.push(tableData)
  emits('update:modelValue',curTableData)
  pagination.value.current=Math.floor(curTableData.length/pagination.value.pageSize)+1 //切换到新增得数据那一页
}



let  pagination=ref({
        total: computed(() => props.modelValue.length),
        pageSize: 10,
        showPageSize:true,
        'onUpdate:pageSize': (pageSize: number) => {
           pagination.value.pageSize = pageSize 
        },
        pageSizeOptions:[5,10,15,20,30,50,100],

        current: 1,
        'onUpdate:current': (current: number) => {
          pagination.value.current = current
        },
    })


</script>
<style scoped lang="less">
.Table {
    width: 100%;
    height: 100%;
}
.optional-title{
  display: flex;
  img{
    width: 16px;
    height: 16px;
    margin-left: 10px;
  }
  align-items: center;
  cursor: pointer;
}
</style>
